<template>
	<view>
		<view>
			<view class="u-text-center u-flex u-align-items u-justify-content u-p-b-30 u-p-t-30">
				<view class="u-m-r-10"><u-icon name="checkmark-circle-fill" size="100" class="ico"></u-icon></view>
				<view class="u-font-36">下单成功</view>
			</view>
			<view class="order" v-for="(res, index) in orderList" :key="res.id">
				<view class="top">
					<view class="left">
						<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
						<view class="store">{{ res.store }}</view>
						<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
					</view>
					<view class="right">{{ res.deal }}</view>
				</view>
				<!-- <view class="u-flex">
					<text class="label u-font-24">回收品类</text>
					<view class="u-flex-1">
						<view class="choose-low">
							<view class="con">
								<view class="item on" v-for="(item,i) in res.goodsList" :key="i">
									<view class="ico"><text class="iconfont u-font-60" :class="item.ico"></text></view>
									<view class="name"><text>{{item.title}}</text></view>
									<view class="mark"><u-icon class="icon" name="checkbox-mark" :color="'#fff'" size="14"></u-icon></view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				
				<view class="item" v-for="(item, i) in res.goodsList" :key="i">
					<view class="content">
						<view class="u-flex">
							<!-- <view class="u-m-r-10"><text class="iconfont u-font-60" :class="item.ico"></text></view> -->
							<view class="u-flex-1">
								<view class="title u-line-2">{{ item.title }}</view>
								<view class="delivery-time">预估重量 {{ item.deliveryTime }}</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="price">
							<text class="u-font-24">预估回收金额：</text>
							<text>￥{{ priceInt(item.price) }}</text>
							<text class="decimal">.{{ priceDecimal(item.price) }}</text>
						</view>
						<!-- <view class="number">x{{ item.number }}</view> -->
					</view>
				</view>
				<!-- <view class="total">
					<text>合计回收重量:</text>
					<text class="total-price">
						<text>20-30</text>
						<text class="decimal">KG</text>
					</text>
				</view>
				<view class="total">
					<text>共{{res.goodsList.length}}种回收品 预估回收合计:</text>
					<text class="total-price">
						<text>￥{{ priceInt(totalPrice(res.goodsList)) }}.</text>
						<text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
					</text>
				</view> -->
				<view class="time">
					<view class="u-flex">
						<text class="label">下单时间</text>
						<text class="u-flex-1 u-text-right">2022-10-08 10:27</text>
					</view>
					<!-- <view class="u-flex">
						<text class="label">上门时间</text>
						<text class="u-flex-1 u-text-right u-font">2022-10-08 12:00</text>
					</view> -->
				</view>
				<!-- <view class="bottom">
					<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
					<view class="evaluate btn">评价</view>
				</view> -->
			</view>
			<view class="button-group">
				<!-- <view class="u-m-b-30"><u-button type="primary">再来一单</u-button></view> -->
				<view class="u-m-b-30"><u-button @click="orderView">查看订单</u-button></view>
				<view class=""><u-button @click="gohome">返回首页</u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList:[
					{
						id: 1,
						store: '清远环保回收清城店',
						deal: '待分配',
						goodsList: [
							{
								ico: 'icon-yifu',
								goodsUrl: 'https://cdn.uviewui.com/uview/common/classify/1/1.jpg',
								title: '衣物',
								deliveryTime: '20-50公斤',
								price: '348.58',
								number: 1
							},
							{
								ico: 'icon-kehuishouwu-feizhilei',
								goodsUrl: 'https://cdn.uviewui.com/uview/common/classify/1/2.jpg',
								title: '废纸',
								deliveryTime: '50-100公斤',
								price: '135.00',
								number: 1
							},
							{
								ico: 'icon-feiqijinshu',
								goodsUrl: 'https://cdn.uviewui.com/uview/common/classify/1/2.jpg',
								title: '金属',
								deliveryTime: '50-100公斤',
								price: '135.00',
								number: 1
							},
						]
					}
				]
			}
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		methods: {
			// 总价
			totalPrice(item) {
				let price = 0;
				item.map(val => {
					price += parseFloat(val.price);
				});
				return price.toFixed(2);
			},
			// 订单详情
			orderView(){
				uni.navigateTo({
					url: '/pages/my/order/views/views?t=1'
				})
			},
			gohome(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.button-group{
		padding: 30rpx;
		// display: flex;
		justify-content: space-between;
	}
	.ico{
		color: $u-color-green;
	}
	
	// 订单
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		.top {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-warning-dark;
			}
		}
		.item {
			display: flex;
			margin: 20rpx 0 0;
			justify-content: space-between;
			.left {
				margin-right: 20rpx;
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
				.delivery-time {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;
			.total-price {
				font-size: 32rpx;
				color: $u-color-orange;
				margin-left: 10rpx;
				.decimal{
					font-size: 24rpx;
				}
			}
		}
		.time{
			font-size: 24rpx;
			margin: 20rpx 0;
			line-height: 40rpx;
		}
		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;
			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}
			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
		// 显示回收品类
		.choose-low{
			background-color: #fff;
			padding: 30rpx 0 0;
			display: flex;
			align-items: center;
			.con{
				// flex: 1;
				display: flex;
				overflow: auto;
				// margin-top: 30rpx;
				width: 550rpx;
				.item{
					text-align: center;
					padding-left: 44rpx;
					position: relative;
					display: block;
					.ico{
						width: 100rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid;
						border-radius: 50%;
					}
					.name{
						margin-top: 20rpx;
					}
					.mark{
						width: 28rpx;
						height: 28rpx;
						background-color: #2ab6b3;
						border-radius: 50%;
						position: absolute;
						right: 0;
						bottom: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					&.on{
						.ico{
							border-color: $u-color-main;
							color: $u-color-main;
							// background-color: $u-color-main;
							// color: #fff;
						}
						color: $u-color-main;
					}
				}
			}
		}
	}
</style>
